<template>
  <div>
    <div class="cs-filter-container">
      <el-input
        v-model="listQuery.content"
        clearable
        placeholder="消息内容(别用.,)"
        style="width: 150px"
      />
      <!--      <el-input-->
      <!--        v-model.trim="listQuery.userId"-->
      <!--        clearable-->
      <!--        placeholder="发送者ID"-->
      <!--        style="width: 100px"-->
      <!--      />-->
      <el-input
        v-model.trim="listQuery.secondUserId"
        clearable
        placeholder="接收者ID"
        style="width: 100px"
      />
      <!--      <el-select-->
      <!--        v-model="listQuery.valid"-->
      <!--        clearable-->
      <!--        placeholder="审核状态"-->
      <!--        style="width: 100px"-->
      <!--      >-->
      <!--        <el-option label="全部" value="-1" />-->
      <!--        <el-option label="待审核" value="0" />-->
      <!--        <el-option label="已审核" value="1" />-->
      <!--      </el-select>-->
      <!--      <el-select-->
      <!--        v-model="listQuery.illegal"-->
      <!--        clearable-->
      <!--        placeholder="是否违规"-->
      <!--        style="width: 100px"-->
      <!--      >-->
      <!--        <el-option label="违规" value="1"></el-option>-->
      <!--        <el-option label="正常" value="0"></el-option>-->
      <!--      </el-select>-->

      <el-input v-model="listQuery.minRate" clearable placeholder="最小鉴黄分数" type="number"></el-input>
      -
      <el-input v-model="listQuery.maxRate" clearable placeholder="最大鉴黄分数" type="number"></el-input>

      <el-input v-model="listQuery.minReplyTime" clearable placeholder="最小回复时长" type="number"></el-input>
      -
      <el-input v-model="listQuery.maxReplyTime" clearable placeholder="最大回复时长" type="number"></el-input>
      <el-select
        v-model="listQuery.msgType"
        clearable
        multiple
        filterable
        placeholder="消息类型"
        style="width: 100px"
      >
        <el-option label="普通文本" value="0" />
        <el-option label="表情" value="1" />
        <el-option label="图片" value="2" />
        <el-option label="私照" value="3" />
        <el-option label="音频" value="4" />
        <el-option label="视频" value="5" />
        <el-option label="礼物" value="6" />
        <el-option label="语音视频聊天" value="7" />
        <el-option label="打招呼" value="11" />
        <el-option label="搭讪" value="12" />
        <el-option label="随机文字" value="14" />
        <el-option label="附近的人" value="15" />
      </el-select>

      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy/MM/dd"
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >
        重置
      </el-button>
    </div>

    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="ID" prop="id" width="70">
        </el-table-column>
        <el-table-column
          align="center"
          label="发送者id"
          prop="nickname"
          width="70"
        >
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.fromUser" />
            <span>{{ userAddress[row.fromUser] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="接收者id" width="70">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.toUser" />
            <span>{{ userAddress[row.toUser] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="消息类型" width="70">
          <template slot-scope="{ row }">{{
            row.msgType | msgTypeFilter
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="内容">
          <template slot-scope="{ row }">
            <img
              v-if="contentType(row) === 1"
              slot="img"
              :src="row.content+ '?x-oss-process=image/resize,w_100'"
              style="cursor: pointer; width: 100px"
              title="点击放大"
              @click="zoomImage(row.content, 'image')"
            />
            <img
              v-else-if="contentType(row) === 2"
              slot="img"
              :src="row.content+ '?x-oss-process=image/resize,w_100'"
              style="cursor: pointer; width: 100px"
              title="点击放大"
              @click="zoomImage(row.content, 'video')"
            />
            <audio v-else-if="contentType(row) === 3" :src="row.content" controls />
            <span v-else>{{ row | jsonContentFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否违规" width="50">
          <template slot-scope="{ row }">{{
            row.illegal ? '是' : '否'
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="鉴黄分数" width="50">
          <template slot-scope="{ row }">{{
            row.rate
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="发送时间" width="150">
          <template slot-scope="{ row }">{{
            row.sendTime | parseTime
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="回复时长(秒)" width="150" prop="replyTime">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.valid === 0"
              type="primary"
              size="mini"
              @click="onVerify(row)"
            >
              已审核
            </el-button>
            <el-button type="danger" size="mini" @click="onDelImage(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
    <ImageViewer :visible.sync="showImage" :url="videoUrl" :type="'image'" />
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import ImageViewer from '@/components/ImageViewer'
import { xhrImmsgList, xhrImmsgVerify, xhrImmsgDelete } from '@api/anchor'
import { parseTime } from '@/utils'

export default {
  name: 'PropChangeList',
  components: { TablePagination, ImageViewer },
  filters: {
    jsonContentFilter(row) {
      if (row.msgType === 7 && row.content) {
        const result = []
        const js = JSON.parse(row.content)
        if (js.callType === 0) {
          result.push('语音')
        } else {
          result.push('视频')
        }
        if (!js.isConnect) {
          result.push('未接通')
        } else {
          result.push((js.duration / 60 / 1000).toFixed(2) + '分钟')
        }
        return result.join(':')
      }
      return row.content
    },
    msgTypeFilter(i) {
      switch (i) {
        case 0:
          return '普通文本'
        case 1:
          return '表情'
        case 2:
          return '图片'
        case 3:
          return '私照'
        case 4:
          return '语音'
        case 5:
          return '视频'
        case 6:
          return '礼物'
        case 7:
          return '语音或视频聊天'
        case 8:
          return '砸金蛋'
        case 9:
          return '图文'
        case 10:
          return '提示消息'
        case 11:
          return '打招呼'
        case 12:
          return '搭讪'
        case 13:
          return '新打招呼'
        case 14:
          return '随机文字'
        case 15:
          return '附近的人'
      }
    }
  },
  props: {
    userId: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      daterangeValue: '',
      listQuery: {
        page: 1,
        limit: 100,
        startTime: null,
        endTime: null,
        userId: this.userId,
        secondUserId: null,
        content: null,
        msgType: [],
        valid: null,
        illegal: null,
        minRate: null,
        maxRate: null,
        maxReplyTime: null,
        minReplyTime: null
      },
      listLoading: true,
      userAddress: {},
      dialogVisible: false,
      showImage: false,
      videoUrl: null,
      imageType: 'image'
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    zoomImage(url, imageType) {
      this.showImage = true
      this.videoUrl = url
      this.imageType = imageType
    },
    validMsg(content) {
      const imageRegex = /^http.*\.(jpg|png|gif|bmp)$/
      if (!content) {
        return false
      }
      if (imageRegex.test(content)) {
        return true
      }
    },
    doSearch() {
      if (this.listQuery.fromId && !/^\d*$/.test(this.listQuery.fromId)) {
        this.$message.warning('用户ID只能是数字')
        this.listLoading = false
        return
      }
      if (this.listQuery.toId && !/^\d*$/.test(this.listQuery.toId)) {
        this.$message.warning('用户ID只能是数字')
        this.listLoading = false
        return
      }
      const params = {
        userId: this.listQuery.userId,
        secondUserId: this.listQuery.secondUserId,
        msgType:
          (this.listQuery.msgType && this.listQuery.msgType.join(',')) || null,
        valid: this.listQuery.valid >= 0 ? this.listQuery.valid : null,
        content: this.listQuery.content,
        offset: this.listQuery.offset,
        limit: this.listQuery.limit,
        startTime: this.listQuery.startTime,
        endTime: this.listQuery.endTime,
        illegal: this.listQuery.illegal,
        minRate: this.listQuery.minRate,
        maxRate: this.listQuery.maxRate,
        maxReplyTime: this.listQuery.maxReplyTime,
        minReplyTime: this.listQuery.minReplyTime
      }
      if (params.maxRate) {
        params.maxRate = Math.min(params.maxRate, 100)
      }
      if (params.minRate) {
        params.minRate = Math.max(params.minRate, 0)
        if (params.maxRate) {
          params.minRate = Math.min(params.minRate, params.maxRate)
        }
      }
      xhrImmsgList(params)
        .then(resp => {
          this.list = resp.data.list
          this.total = resp.data.count
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    onVerify(row) {
      if (row.valid === 1) {
        return
      }
      const t = parseTime(row.sendTime)
      row.valid = 1
      xhrImmsgVerify({
        id: row.id,
        time: t
      })
        .then(resp => {
          this.$message.success(row.id + '已阅!')
          this.$forceUpdate()
        })
        .catch(e => {
          row.valid = 0
          this.$forceUpdate()
        })
    },

    onDelImage(row) {
      const t = parseTime(row.sendTime)
      this.$confirm('确定删除' + row.id + ' 该条聊天记录?').then(() => {
        xhrImmsgDelete({
          id: row.id,
          time: t
        })
          .then(resp => {
            this.$message.success('操作成功')
            this.doSearch()
          })
          .catch(err => {
            this.$message.error(err)
          })
      })
    },
    onGoDetail(id) {
      this.$router.push('/account/account-detail?id=' + id)
    },
    contentType(row) {
      if (row.msgType === 5) {
        return 2 // 视频截图
      } else if (row.msgType === 4) {
        return 3 // 音频
      } else if (row.msgType === 2 || row.msgType === 3 || this.validMsg(row.content)) {
        return 1 // 图片
      }
      return 4
    }

  }
}
</script>
